<template>
  <div class="articlelist-container">
    <!-- 表格 -->
    <el-table :data="articleList" style="width: 100%" border>
      <el-table-column type="index" align="center" label="序号" width="50">
      </el-table-column>
      <el-table-column header-align="center" label="文章名称">
        <template slot-scope="scope">
          <el-popover placement="right" trigger="hover" width="300">
            <el-image :src="setDevImg(scope.row.thumb)" fit="fill"></el-image>
            <el-link :underline="false" slot="reference">{{
              scope.row.title
            }}</el-link>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="description"
        header-align="center"
        label="文章描述"
      >
      </el-table-column>
      <el-table-column prop="scanNumber" align="center" label="浏览量">
      </el-table-column>
      <el-table-column prop="commentNumber" align="center" label="评论量">
      </el-table-column>
      <el-table-column align="center" label="所属分类">
        <template slot-scope="scope">
          {{ scope.row.category ? scope.row.category.name : "未分类" }}
        </template>
      </el-table-column>
      <el-table-column prop="address" align="center" label="创建日期">
        <template slot-scope="scope">
          {{ formatTime(scope.row.createDate) }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handlerEdit(scope.row)"
            >编辑</el-button
          >

          <el-button
            slot="reference"
            type="danger"
            size="mini"
            @click="handlerDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      :page-sizes="[10, 50, 80]"
      :page-size="tablePage.limit"
      @size-change="handlePageSizeChange"
      @current-change="handlePageChange"
      :current-page="tablePage.page"
      layout="prev, pager, next, total, ->, sizes, jumper"
      :total="tablePage.total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getArticleAPI, deleteArticleAPI } from "@/api/article";
import { parseTime, setDevImg } from "@/utils";
import { MessageBox } from "element-ui";
export default {
  name: "ArticleList",
  data() {
    return {
      articleList: [],
      tablePage: {
        page: 1,
        limit: 10,
        total: 0,
      },
    };
  },
  created() {
    this.getArticleList();
  },
  methods: {
    setDevImg,
    // 格式化时间
    formatTime(time) {
      return parseTime(time, "{y}-{m}-{d} {h}:{i}:{s} 星期{a}");
    },
    async getArticleList() {
      const res = await getArticleAPI(this.tablePage);
      if (typeof res !== "string") {
        this.articleList = res.data.rows;
        this.tablePage.total = res.data.total;
      } else {
        const { msg } = JSON.parse(res);
        this.$message.error(msg || "获取文章列表失败");
      }
    },
    handlerEdit(row) {
      this.$router.push({ path: `/article/editarticle/${row.id}` });
    },
    async handlerDelete(row) {
      MessageBox.confirm("此操作将永久删除该文件, 是否继续?", "文章删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await deleteArticleAPI(row.id);
          if (typeof res !== "string") {
            this.$message.success("删除文章成功");
            this.getArticleList();
          } else {
            const { msg } = JSON.parse(res);
            this.$message.error(msg || "删除文章失败");
          }
        })
        .catch(() => {});
    },
    handlePageSizeChange(pageSize) {
      this.tablePage.page = 1;
      this.tablePage.limit = pageSize;
      this.getArticleList();
    },
    handlePageChange(page) {
      this.tablePage.page = page;
      this.getArticleList();
    },
  },
};
</script>

<style scoped lang="scss">
.articlelist-container {
  padding: 10px;
}
.el-pagination {
  margin: 10px 0;
}
</style>
